@{   ViewBag.Title = "微信小程序组件";
    ViewBag.keywords = "微信小程序,组件,组件名,组件属性,微信小程序组件";
    ViewBag.description = "微信小程序开发中各种常用组件的概念、功能、相关属性及使用方法，方便需要的朋友进行快速查询";
  
}
    <div class="layui-row">
        <div class="layui-elem-quote">
            <p>为了方便大家理解与查询微信小程序组件，这里整理了微信小程序的常用组件分类与功能描述。内容整理自官网。内容不断整理补充中。</p>
            <p>官网原链接<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/" target="_blank" rel="nofollow">https://mp.weixin.qq.com/debug/wxadoc/dev/component/</a></p>
        </div>
    </div>
    <div class="layui-row">
        <h3 id="基础组件"><a name="t0"></a>基础组件</h3>
        <p>框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。</p>
        <h4>什么是组件：</h4>
        <ul>
            <li>组件是视图层的基本组成单元。</li>
            <li>组件自带一些功能与微信风格的样式。</li>
            <li>一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。</li>
        </ul>

<pre class="prettyprint">
<code class="hljs r has-numbering">&lt;tagname property=<span class="hljs-string">"value"</span>&gt;
  Content goes here <span class="hljs-keyword">...</span>
&lt;/tagename&gt;</code>
</pre>

        <h2 id="属性类型"><a name="t1"></a>属性类型</h2>

        <table class="layui-table">
            <thead>
                <tr>
                    <th>类型</th>
                    <th>描述</th>
                    <th>注解</th>
                </tr>
                <tr>
                    <td>Boolean</td>
                    <td>布尔值</td>
                    <td>组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型</td>
                </tr>
                <tr>
                    <td>Number</td>
                    <td>数字</td>
                    <td>1, 2.5</td>
                </tr>
                <tr>
                    <td>String</td>
                    <td>字符串</td>
                    <td>“string”</td>
                </tr>
                <tr>
                    <td>Array</td>
                    <td>数组</td>
                    <td>[ 1, “string” ]</td>
                </tr>
                <tr>
                    <td>Object</td>
                    <td>对象</td>
                    <td>{ key: value }</td>
                </tr>
                <tr>
                    <td>EventHandler</td>
                    <td>事件处理函数名</td>
                    <td>“handlerName” 是 Page中定义的事件处理函数名</td>
                </tr>
                <tr>
                    <td>Any</td>
                    <td>任意属性</td>
                    <td></td>
                </tr>
            </thead>
        </table>

        共同属性类型
        <table class="layui-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>描述</th>
                    <th>注解</th>
                </tr>
                <tr>
                    <td>id</td>
                    <td>String</td>
                    <td>组件的唯一标示 </td>
                    <td>保持整个页面唯一</td>
                </tr>
                <tr>
                    <td>class</td>
                    <td>String</td>
                    <td>组件的样式类</td>
                    <td>在对应的 WXSS 中定义的样式类</td>
                </tr>
                <tr>
                    <td>style</td>
                    <td>String</td>
                    <td>组件的内联样式</td>
                    <td>可以动态设置的内联样式</td>
                </tr>
                <tr>
                    <td>hidden</td>
                    <td>String</td>
                    <td>组件是否显示</td>
                    <td>所有组件默认显示</td>
                </tr>
                <tr>
                    <td>data-*</td>
                    <td>Any</td>
                    <td>自定义属性</td>
                    <td>组件上触发的事件时，会发送给事件处理函数</td>
                </tr>
                <tr>
                    <td>bind* / catch*</td>
                    <td>EventHandler</td>
                    <td>组件的事件</td>
                    <td></td>
                </tr>
            </thead>
        </table>

        <h1 id="基本组件列表"><a name="t2"></a>基本组件列表</h1>

        <p>基础组件分为以下几类：</p>
        <div class="btn-group">
            <a class="btn btn-default" href="#tview">视图容器(View Container)</a>
            <a class="btn btn-default" href="#tcontent">基础内容(Basic Content)</a>
            <a class="btn btn-default" href="#tform">表单(Form)</a>
            <a class="btn btn-default" href="#tnav">导航(Navigation)</a>
            <a class="btn btn-default" href="#tmedia">多媒体(Media)</a>
            <a class="btn btn-default" href="#tmap">地图(Map)</a>
            <a class="btn btn-default" href="#tcanvas">画布(Canvas)</a>
        </div>

        <h2 id="视图容器view-container"><a name="tview"></a>视图容器(View Container)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="71" rowspan="2">组件名</th>
                    <th width="137" rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="137">属性名</th>
                    <th width="55">类型</th>
                    <th width="51">默认值</th>
                    <th width="487">说明</th>
                    <th width="68">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="4">view</td>
                    <td rowspan="4">视图容器</td>
                    <td>hover-class</td>
                    <td>String</td>
                    <td>none</td>
                    <td>指定按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果 </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>hover-stop-propagation</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>指定是否阻止本节点的祖先节点出现点击态</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>hover-start-time</td>
                    <td>Number</td>
                    <td>50</td>
                    <td>按住后多久出现点击态，单位毫秒</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>hover-stay-time</td>
                    <td>Number</td>
                    <td>400</td>
                    <td>手指松开后点击态保留时间，单位毫秒</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="12">scroll-view</td>
                    <td rowspan="12">可滚动视图容器</td>
                    <td>scroll-x</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>允许横向滚动</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scroll-y</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>允许纵向滚动</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>upper-threshold</td>
                    <td>Number</td>
                    <td>50</td>
                    <td>距顶部/左边多远时（单位px），触发 scrolltoupper 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>lower-threshold</td>
                    <td>Number</td>
                    <td>50</td>
                    <td>距底部/右边多远时（单位px），触发 scrolltolower 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scroll-top</td>
                    <td>Number</td>
                    <td>&nbsp;</td>
                    <td>设置竖向滚动条位置</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scroll-left</td>
                    <td>Number</td>
                    <td>&nbsp;</td>
                    <td>设置横向滚动条位置</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scroll-into-view</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td>值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scroll-with-animation</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>在设置滚动条位置时使用动画过渡</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>enable-back-to-top</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindscrolltoupper</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td>滚动到顶部/左边，会触发 scrolltoupper 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindscrolltolower</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td>滚动到底部/右边，会触发 scrolltolower 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindscroll</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td>滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="10">swiper</td>
                    <td rowspan="10">滑块视图容器</td>
                    <td>indicator-dots</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示面板指示点</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>indicator-color</td>
                    <td>Color</td>
                    <td>rgba(0, 0, 0, .3)</td>
                    <td>指示点颜色</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>indicator-active-color</td>
                    <td>Color</td>
                    <td>#000000</td>
                    <td>当前选中的指示点颜色</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>autoplay</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否自动切换</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>current</td>
                    <td>Number</td>
                    <td>0</td>
                    <td>当前所在页面的 index</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>interval</td>
                    <td>Number</td>
                    <td>5000</td>
                    <td>自动切换时间间隔</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>duration</td>
                    <td>Number</td>
                    <td>500</td>
                    <td>滑动动画时长</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>circular</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否采用衔接滑动</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>vertical</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>滑动方向是否为纵向</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td>current 改变时会触发 change 事件，event.detail = {current: current, source: source}</td>
                    <td>&nbsp;</td>
                </tr>
            </thead>
        </table>

        <h2 id="基础内容basic-content"><a name="tcontent"></a>基础内容(Basic Content)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th rowspan="2">组件名</th>
                    <th rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="137">属性名</th>
                    <th width="55">类型</th>
                    <th width="51">默认值</th>
                    <th width="487">说明</th>
                    <th width="68">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="3">icon</th>
                    <td rowspan="3">图标</th>
                    <td>type</th>
                    <td>String</th>
                    <td>&nbsp;</th>
                    <td>icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear</th>
                    <td>&nbsp;</th>
                </tr>
                <tr>
                    <td>size</td>
                    <td>Number</td>
                    <td>23</td>
                    <td>icon的大小，单位px</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>&nbsp;</td>
                    <td>icon的颜色，同css的color</td>
                    <td>&nbsp;</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="3">text</td>
                    <td rowspan="3">文字</td>
                    <td>selectable</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>文本是否可选</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>space</td>
                    <td>String</td>
                    <td>false</td>
                    <td>显示连续空格<br />有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>decode</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否解码</td>
                    <td>1.4.0</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="8">progress</td>
                    <td rowspan="8">进度条</td>
                    <td>percent</td>
                    <td>Float</td>
                    <td>无</td>
                    <td>百分比0~100</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>show-info</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>在进度条右侧显示百分比</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>stroke-width</td>
                    <td>Number</td>
                    <td>6</td>
                    <td>进度条线的宽度，单位px</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>#09BB07</td>
                    <td>进度条颜色 （请使用 activeColor）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>activeColor</td>
                    <td>Color</td>
                    <td>&nbsp;</td>
                    <td>已选择的进度条的颜色</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>backgroundColor</td>
                    <td>Color</td>
                    <td>&nbsp;</td>
                    <td>未选择的进度条的颜色</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>active</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>进度条从左往右的动画</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>active-mode</td>
                    <td>String</td>
                    <td>backwards</td>
                    <td>backwards: 动画从头播；forwards：动画从上次结束点接着播</td>
                    <td>1.7.0</td>
                </tr>
            </thead>
        </table>

        <h2 id="表单form"><a name="tform"></a>表单(Form)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="68" rowspan="2">组件名</th>
                    <th width="153" rowspan="2">注释</th>
                    <th colspan="6">组件属性</th>
                </tr>
                <tr>
                    <th width="187">属性名</th>
                    <th width="55">类型</th>
                    <th width="51">默认值</th>
                    <th width="423">说明</th>
                    <th width="231">生效时机</th>
                    <th width="68">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="20">button</td>
                    <td rowspan="20">按钮</td>
                    <td>size</td>
                    <td>String</td>
                    <td>default</td>
                    <td>按钮的大小</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>String</td>
                    <td>default</td>
                    <td>按钮的样式类型</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>plain</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>按钮是否镂空，背景色透明</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否禁用</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>名称前是否带 loading 图标</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>form-type</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td>用于 &lt;form/&gt; 组件，点击分别会触发 &lt;form/&gt; 组件的 submit/reset 事件</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>open-type</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>微信开放能力</td>
                    <td>&nbsp;</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>hover-class</td>
                    <td>String</td>
                    <td>button-hover</td>
                    <td>指定按钮按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果</td>
                    <td>&nbsp;</td>
                    <td>&nbsp; </td>
                </tr>
                <tr>
                    <td>hover-stop-propagation</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>指定是否阻止本节点的祖先节点出现点击态</td>
                    <td>&nbsp;</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>hover-start-time</td>
                    <td>Number</td>
                    <td>20</td>
                    <td>按住后多久出现点击态，单位毫秒</td>
                    <td>&nbsp;</td>
                    <td>&nbsp; </td>
                </tr>
                <tr>
                    <td>hover-stay-time</td>
                    <td>Number</td>
                    <td>70</td>
                    <td>手指松开后点击态保留时间，单位毫秒</td>
                    <td>&nbsp;</td>
                    <td>&nbsp; </td>
                </tr>
                <tr>
                    <td>bindgetuserinfo</td>
                    <td>Handler</td>
                    <td>&nbsp; </td>
                    <td>用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo</td>
                    <td>open-type=&quot;getUserInfo'</td>
                    <td>1.3.0</td>
                </tr>
                <tr>
                    <td>lang</td>
                    <td>String</td>
                    <td>en</td>
                    <td>指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	</td>
                    <td>open-type="getUserInfo"</td>
                    <td>1.3.0</td>
                </tr>
                <tr>
                    <td>session-from</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td>会话来源	</td>
                    <td>open-type="contact"</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>send-message-title</td>
                    <td>String</td>
                    <td>当前标题</td>
                    <td>会话内消息卡片标题 </td>
                    <td>open-type="contact"</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>send-message-path</td>
                    <td>String</td>
                    <td>当前分享路径</td>
                    <td>会话内消息卡片点击跳转小程序路径	</td>
                    <td>open-type="contact"</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>send-message-img</td>
                    <td>String</td>
                    <td>截图</td>
                    <td>会话内消息卡片图片	</td>
                    <td>open-type="contact"</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>show-message-card</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>显示会话内消息卡片	</td>
                    <td>open-type="contact"</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>bindcontact</td>
                    <td>Handler</td>
                    <td>&nbsp;</td>
                    <td>客服消息回调	</td>
                    <td>open-type="contact"</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>bindgetphonenumber</td>
                    <td>Handler</td>
                    <td>&nbsp;</td>
                    <td>获取用户手机号回调	</td>
                    <td>open-type="getphonenumber"</td>
                    <td>1.2.0</td>
                </tr>
                <tr>
                    <td rowspan="3">form</td>
                    <td rowspan="3">表单</td>
                    <td>report-submit</td>
                    <td>Boolean</td>
                    <td>&nbsp;</td>
                    <td colspan="2">是否返回 formId 用于发送模板消息</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindsubmit</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}	</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindreset</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">表单重置时会触发 reset 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="18">input</td>
                    <td rowspan="18">输入框</td>
                    <td>value</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">输入框的初始内容</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>String</td>
                    <td>"text"</td>
                    <td colspan="2">input 的类型</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否是密码类型</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">输入框为空时占位符</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>placeholder-style</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">指定 placeholder 的样式</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>placeholder-class</td>
                    <td>String</td>
                    <td>"input-placeholder"</td>
                    <td colspan="2">指定 placeholder 的样式类</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>maxlength</td>
                    <td>Number</td>
                    <td>140</td>
                    <td colspan="2">最大输入长度，设置为 -1 的时候不限制最大长度</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>cursor-spacing</td>
                    <td>Number</td>
                    <td>0</td>
                    <td colspan="2">指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>auto-focus</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>focus</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">获取焦点</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>confirm-type</td>
                    <td>String</td>
                    <td>"done"</td>
                    <td colspan="2">设置键盘右下角按钮的文字</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>confirm-hold</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">点击键盘右下角按钮时是否保持键盘不收起</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>cursor</td>
                    <td>Number</td>
                    <td>&nbsp;</td>
                    <td colspan="2">指定focus时的光标位置</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>bindinput</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindfocus</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">输入框聚焦时触发，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindblur</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">输入框失去焦点时触发，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindconfirm</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">点击完成按钮时触发，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>

                <tr>
                    <td rowspan="4">checkbox</td>
                    <td rowspan="4">多项选择器</td>
                    <td>value</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">&lt;checkbox/&gt;标识，选中时触发&lt;checkbox-group/&gt;的 change 事件，并携带 &lt;checkbox/&gt; 的 value</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>checked</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">当前是否选中，可用来设置默认选中</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>&nbsp;</td>
                    <td colspan="2">checkbox的颜色，同css的color</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="4">radio</td>
                    <td rowspan="4">单项选择器</td>
                    <td>value</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">&lt;radio/&gt; 标识。当该&lt;radio/&gt; 选中时，&lt;radio-group/&gt; 的 change 事件会携带&lt;radio/&gt;的value</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>checked</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">当前是否选中，可用来设置默认选中</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>&nbsp;</td>
                    <td colspan="2">radio的颜色，同css的color</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="5">picker<br />(mode = selector)</td>
                    <td rowspan="5">(普通)列表选择器</td>
                    <td>range</td>
                    <td>Array / Object Array</td>
                    <td>[]</td>
                    <td colspan="2">mode为 selector 或 multiSelector 时，range 有效</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>range-key</td>
                    <td>String</td>
                    <td>&nbsp;</td>
                    <td colspan="2">当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>Number</td>
                    <td>0</td>
                    <td colspan="2">value 的值表示选择了 range 中的第几个（下标从 0 开始）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp;</td>
                    <td colspan="2">value 改变时触发 change 事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="6">picker<br />(mode = multiSelector)</td>
                    <td rowspan="6">(多列)列表选择器</td>
                    <td>range</td>
                    <td>二维Array / 二维Object Array</td>
                    <td>[]</td>
                    <td colspan="2">mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[&quot;a&quot;,&quot;b&quot;], [&quot;c&quot;,&quot;d&quot;]]</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>range-key</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>Array</td>
                    <td>0</td>
                    <td colspan="2">value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">value 改变时触发 change 事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindcolumnchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="5">picker<br />(mode = time)</td>
                    <td rowspan="5">(时间)列表选择器</td>
                    <td>value</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">表示选中的时间，格式为&quot;hh:mm&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>start</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">表示有效时间范围的开始，字符串格式为&quot;hh:mm&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>end</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">表示有效时间范围的结束，字符串格式为&quot;hh:mm&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">value 改变时触发 change 事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="6">picker<br />(mode = date)</td>
                    <td rowspan="6">(日期)列表选择器</td>
                    <td>value</td>
                    <td>String</td>
                    <td>0</td>
                    <td colspan="2">表示选中的日期，格式为&quot;YYYY-MM-DD&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>start</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">表示有效日期范围的开始，字符串格式为&quot;YYYY-MM-DD&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>end</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">表示有效日期范围的结束，字符串格式为&quot;YYYY-MM-DD&quot;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>fields</td>
                    <td>String</td>
                    <td>day</td>
                    <td colspan="2">有效值 year,month,day，表示选择器的粒度</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">value 改变时触发 change 事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="4">picker<br />(mode = region)</td>
                    <td rowspan="4">(日期)列表选择器</td>
                    <td>value</td>
                    <td>Array</td>
                    <td>[]</td>
                    <td colspan="2">表示选中的省市区，默认选中每一列的第一个值</td>
                    <td>&nbsp;</td>
                <tr>
                    <td>custom-item</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">可为每一列的顶部添加一个自定义的项</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">value 改变时触发 change 事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="6">picker-view</td>
                    <td rowspan="6">内嵌列表选择器</td>
                    <td>value</td>
                    <td>NumberArray</td>
                    <td>&nbsp; </td>
                    <td colspan="2">数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>indicator-style</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">设置选择器中间选中框的样式</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>indicator-class</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">设置选择器中间选中框的类名</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>mask-style</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">设置蒙层的样式</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>mask-class</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">设置蒙层的类名</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="12">slider</td>
                    <td rowspan="12">滚动选择器</td>
                    <td>min</td>
                    <td>Number</td>
                    <td>0</td>
                    <td colspan="2">最小值</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>max</td>
                    <td>Number</td>
                    <td>100</td>
                    <td colspan="2">最大值</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>step</td>
                    <td>Number</td>
                    <td>0</td>
                    <td colspan="2">步长，取值必须大于 0，并且可被(max - min)整除</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否禁用</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>Number</td>
                    <td>0</td>
                    <td colspan="2">当前取值</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>#e9e9e9</td>
                    <td colspan="2">背景条的颜色（请使用 backgroundColor）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>selected-color</td>
                    <td>Color</td>
                    <td>#1aad19</td>
                    <td colspan="2">已选择的颜色（请使用 activeColor）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>activeColor</td>
                    <td>Color</td>
                    <td>#1aad19</td>
                    <td colspan="2">已选择的颜色</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>backgroundColor</td>
                    <td>Color</td>
                    <td>#e9e9e9</td>
                    <td colspan="2">背景条的颜色</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>show-value</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否显示当前 value</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">完成一次拖动后触发的事件，event.detail = {value: value}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchanging</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">拖动过程中触发的事件，event.detail = {value: value}</td>
                    <td>1.7.0</td>
                </tr>
                <tr>
                    <td rowspan="4">switch</td>
                    <td rowspan="4">开关选择器</td>
                    <td>checked</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td colspan="2">是否选中</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>String</td>
                    <td>switch</td>
                    <td colspan="2">样式，有效值：switch, checkbox</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td colspan="2">checked 改变时触发 change 事件，event.detail={ value:checked}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>Color</td>
                    <td>&nbsp; </td>
                    <td colspan="2">switch 的颜色，同 css 的 color</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="1">label</td>
                    <td rowspan="1">标签</td>
                    <td>for</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td colspan="2">绑定控件的 id</td>
                    <td>&nbsp;</td>
                </tr>
            </thead>
        </table>

        <h2 id="导航navigation"><a name="tnav"></a>导航(Navigation)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="68" rowspan="2">组件名</th>
                    <th width="153" rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="187">属性名</th>
                    <th width="67">类型</th>
                    <th width="97">默认值</th>
                    <th width="432">说明</th>
                    <th width="105">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="7">navigator</td>
                    <td rowspan="7">应用链接</td>
                    <td>url</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>应用内的跳转链接</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>open-type</td>
                    <td>String</td>
                    <td>navigate</td>
                    <td>跳转方式</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>delta</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>当 open-type 为 'navigateBack' 时有效，表示回退的层数</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>hover-class</td>
                    <td>String</td>
                    <td>navigator-hover</td>
                    <td>指定点击时的样式类，当hover-class=&quot;none&quot;时，没有点击态效果</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>hover-stop-propagation</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>指定是否阻止本节点的祖先节点出现点击态</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>hover-start-time</td>
                    <td>Number</td>
                    <td>50</td>
                    <td>按住后多久出现点击态，单位毫秒</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>hover-stay-time</td>
                    <td>Number</td>
                    <td>600</td>
                    <td>手指松开后点击态保留时间，单位毫秒</td>
                    <td>&nbsp;</td>
                </tr>
            </thead>
        </table>

        其中open-type 的有效值如下：
        <table border="1" class="layui-table">
            <thead>
                <tr><th>值</th><th>说明</th><th>最低版本</th></tr>
                <tr><td>navigate</td><td>对应 wx.navigateTo 的功能</td><td>&nbsp;</td></tr>
                <tr><td>redirect</td><td>对应 wx.redirectTo 的功能</td><td>&nbsp;</td></tr>
                <tr><td>switchTab</td><td>对应 wx.switchTab 的功能</td><td>&nbsp;</td></tr>
                <tr><td>reLaunch</td><td>对应 wx.reLaunch 的功能</td><td>1.1.0</td></tr>
                <tr><td>navigateBack</td><td>对应 wx.navigateBack 的功能</td><td>1.1.0</td></tr>
            </thead>
        </table>

        <h2 id="多媒体media"><a name="tmedia"></a>多媒体(Media)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="68" rowspan="2">组件名</th>
                    <th width="153" rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="187">属性名</th>
                    <th width="67">类型</th>
                    <th width="97">默认值</th>
                    <th width="432">说明</th>
                    <th width="105">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="12">audio</td>
                    <td rowspan="12">音频</td>
                    <td>id</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>audio 组件的唯一标识符</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>src</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>要播放音频的资源地址</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>loop</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否循环播放</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>controls</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示默认控件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>poster</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>String</td>
                    <td>未知音频</td>
                    <td>默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>author</td>
                    <td>String</td>
                    <td>未知作者</td>
                    <td>默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>binderror</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindplay</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当开始/继续播放时触发play事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindpause</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当暂停播放时触发 pause 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindtimeupdate</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindended</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当播放到末尾时触发 ended 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td rowspan="5">image</td>
                    <td rowspan="5">图片</td>
                    <td>src</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>图片资源地址</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>mode</td>
                    <td>String</td>
                    <td>'scaleToFill'</td>
                    <td>图片裁剪、缩放的模式</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>lazy-load</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>图片懒加载。只针对page与scroll-view下的image有效</td>
                    <td>1.5.0</td>
                </tr>
                <tr>
                    <td>binderror</td>
                    <td>HandleEvent</td>
                    <td>&nbsp; </td>
                    <td>当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindload</td>
                    <td>HandleEvent</td>
                    <td>&nbsp; </td>
                    <td>当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}</td>
                    <td>&nbsp;</td>
                </tr>
                <tr></tr>
                <tr>
                    <td rowspan="19">video</td>
                    <td rowspan="19">视频</td>
                    <td>src</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>要播放视频的资源地址</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>initial-time</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>指定视频初始播放位置</td>
                    <td>1.6.0</td>
                </tr>
                <tr>
                    <td>duration</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>指定视频时长</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>controls</td>
                    <td>Boolean</td>
                    <td>true</td>
                    <td>是否显示默认播放控件（播放/暂停按钮、播放进度、时间）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>danmu-list</td>
                    <td>Object Array</td>
                    <td>&nbsp; </td>
                    <td>弹幕列表</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>danmu-btn</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示弹幕按钮，只在初始化时有效，不能动态变更</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>enable-danmu</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否展示弹幕，只在初始化时有效，不能动态变更</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>autoplay</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否自动播放</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>loop</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否循环播放</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>muted</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否静音播放</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>page-gesture</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>在非全屏模式下，是否开启亮度与音量调节手势</td>
                    <td>1.6.0</td>
                </tr>
                <tr>
                    <td>direction</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）</td>
                    <td>1.7.0</td>
                </tr>
                <tr>
                    <td>bindplay</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当开始/继续播放时触发play事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindpause</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当暂停播放时触发 pause 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindended</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当播放到末尾时触发 ended 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindtimeupdate</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindfullscreenchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>objectFit</td>
                    <td>String</td>
                    <td>contain</td>
                    <td>当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>poster</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效</td>
                    <td>&nbsp;</td>
                </tr>
            </thead>
        </table>

        <h2 id="地图map"><a name="tmap"></a>地图(Map)：</h2>
        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="68" rowspan="2">组件名</th>
                    <th width="153" rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="187">属性名</th>
                    <th width="67">类型</th>
                    <th width="97">默认值</th>
                    <th width="432">说明</th>
                    <th width="105">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="16">map</td>
                    <td rowspan="16">地图</td>
                    <td>longitude</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>中心经度</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>latitude</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>中心纬度</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>scale</td>
                    <td>Number</td>
                    <td>16 </td>
                    <td>缩放级别，取值范围为5-18</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>markers</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td>标记点</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>covers</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td><strong>即将移除，请使用 markers</strong></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>polyline</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td>路线</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>circles</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td>圆</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>controls</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td>控件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>include-points</td>
                    <td>Array</td>
                    <td>&nbsp; </td>
                    <td>缩放视野以包含所有给定的坐标点</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>show-location</td>
                    <td>Boolean</td>
                    <td>&nbsp; </td>
                    <td>显示带有方向的当前定位点</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindmarkertap</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>点击标记点时触发</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindcallouttap</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>点击标记点对应的气泡时触发</td>
                    <td>1.2.0</td>
                </tr>
                <tr>
                    <td>bindcontroltap</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>点击控件时触发</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindregionchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>视野发生变化时触发</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindtap</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>点击地图时触发</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindupdated</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>在地图渲染更新完成时触发</td>
                    <td>1.6.0</td>
                </tr>
            </thead>
        </table>
        <h2 id="画布canvas"><a name="tcanvas"></a>画布(Canvas)：</h2>

        <table border="1" class="layui-table">
            <thead>
                <tr>
                    <th width="68" rowspan="2">组件名</th>
                    <th width="153" rowspan="2">注释</th>
                    <th colspan="5">组件属性</th>
                </tr>
                <tr>
                    <th width="187">属性名</th>
                    <th width="67">类型</th>
                    <th width="97">默认值</th>
                    <th width="432">说明</th>
                    <th width="105">最低版本</th>
                </tr>
                <tr>
                    <td rowspan="24">canvas</td>
                    <td rowspan="24">画布</td>
                    <td>src</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>要播放视频的资源地址</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>initial-time</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>指定视频初始播放位置</td>
                    <td>1.6.0</td>
                </tr>
                <tr>
                    <td>duration</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>指定视频时长</td>
                    <td>1.1.0</td>
                </tr>
                <tr>
                    <td>controls</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>是否显示默认播放控件（播放/暂停按钮、播放进度、时间）</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>danmu-list</td>
                    <td>Object Array</td>
                    <td>&nbsp; </td>
                    <td>弹幕列表</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>danmu-btn</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>是否显示弹幕按钮，只在初始化时有效，不能动态变更</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>enable-danmu</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>是否展示弹幕，只在初始化时有效，不能动态变更</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>autoplay</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>是否自动播放</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>loop</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>是否循环播放</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>muted</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>是否静音播放</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>page-gesture</td>
                    <td>Boolean</td>
                    <td>false </td>
                    <td>在非全屏模式下，是否开启亮度与音量调节手势</td>
                    <td>1.6.0</td>
                </tr>
                <tr>
                    <td>direction</td>
                    <td>Number</td>
                    <td>&nbsp; </td>
                    <td>设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）</td>
                    <td>1.7.0</td>
                </tr>
                <tr>
                    <td>show-progress</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>若不设置，宽度大于240时才会显示</td>
                    <td>1.9.0</td>
                </tr>
                <tr>
                    <td>show-fullscreen-btn</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>是否显示全屏按钮</td>
                    <td>1.9.0</td>
                </tr>
                <tr>
                    <td>show-play-btn</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>是否显示视频底部控制栏的播放按钮</td>
                    <td>1.9.0</td>
                </tr>
                <tr>
                    <td>show-center-play-btn</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>是否显示视频中间的播放按钮</td>
                    <td>1.9.0</td>
                </tr>
                <tr>
                    <td>enable-progress-gesture</td>
                    <td>Boolean</td>
                    <td>true </td>
                    <td>是否开启控制进度的手势</td>
                    <td>1.9.0</td>
                </tr>
                <tr>
                    <td>bindplay</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当开始/继续播放时触发play事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindpause</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当暂停播放时触发 pause 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindended</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当播放到末尾时触发 ended 事件</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindtimeupdate</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>bindfullscreenchange</td>
                    <td>EventHandle</td>
                    <td>&nbsp; </td>
                    <td>当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal</td>
                    <td>1.4.0</td>
                </tr>
                <tr>
                    <td>objectFit</td>
                    <td>String</td>
                    <td>contain </td>
                    <td>当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>poster</td>
                    <td>String</td>
                    <td>&nbsp; </td>
                    <td>视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效</td>
                    <td>&nbsp;</td>
                </tr>
            </thead>
        </table>
    </div>